<template>
	<view>
		<view v-for="(item, index) in list" :key="index">
			<uni-collapse>
				<uni-collapse-item :title="item.name" :thumb="item.picture">
					<view class="content">
						<scroll-view class='scrollContainer' scroll-x>
							<view class='scrollitem' v-for="(itemTag, indexTag) in item.tag" :key="indexTag"
								@click="getItem(index)">
								<view style="padding-bottom: 8rpx;">
									<u-tag @click="chooseTag(itemTag.id, itemTag.name)" :text="itemTag.name"
										type="warning" icon="tags"></u-tag>
								</view>
							</view>
							<view class="EmptyData" v-if="item.tag.length==0">暂无数据</view>
						</scroll-view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				tagList: [],
			}
		},
		onLoad() {
			let that = this;
			that.$ajax(that.$url.searchTag, "GET", null, function(resp) {
				that.list = resp.data.result;
			})
		},
		methods: {
			chooseTag(id, name) {
				console.log("choose", id)
				uni.setStorageSync("tagId", id);
				uni.setStorageSync("tagName", name);
				// 返回上一页
				uni.navigateBack();
				// uni.navigateTo({
				// 	url: '/pages/add_post/add_post?tagId=' + id + "&tagName=" + name
				// })
			}
		}
	}
</script>

<style>
	// 容器
	.scrollContainer {
		padding-top: 40rpx;
		padding-left: 20rpx;
		width: 666rpx;
		height: 124rpx;
		white-space: nowrap;
	}

	// 容器项
	.scrollitem {
		display: inline-block;
		margin-left: 30rpx;
		height: 234rpx;
	}

	.scrollimage {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		/* 将边框半径设置为50%以实现圆形效果 */
		object-fit: cover;
		/* 保持图片比例并裁剪超出的部分 */
	}

	.recommandItemText {
		font-size: 20rpx;
		width: 110rpx;
		padding-left: 5rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.EmptyData {
		text-align: center;
		margin-top: 50rpx;
	}
</style>